<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '班级主页',
	},
}
</route>

<template>
	<view class="page-class">
		<fly-navbar leftText="班级主页" fixed />
		<block v-if="userInfo.student_id && userInfo.class_id">
			<view class="w-full px-4 mb-6 mt-6 box-border">
				<view class="class-card w-full px-4 pt-6 pb-3 box-border rounded-[30rpx]">
					<view class="flex justify-between items-center">
						<view class="flex flex-col">
							<text class="text-[#FCFCFC] text-[43rpx]"
								>{{ userInfo.grade_name }}{{ userInfo.class_name }}</text
							>
							<text class="mt-2 text-[#FCFCFC] text-[28rpx]">{{ userInfo.school_name }}</text>
						</view>
						<image
							:src="userInfo.avatar || baseImg + '/user-default.png'"
							class="w-[113rpx] h-[113rpx] border-2 border-[#fff] border-solid rounded-[50%]"
						></image>
					</view>
					<view
						@tap="toLink('/pages/class/roster/index')"
						class="w-full flex justify-between items-center rounded-[30rpx] px-4 py-1 mt-[38rpx] box-border student-process"
					>
						<text class="text-[#34A4E2] text-[25rpx]">{{ classInfo.student_total }}学生</text>
						<view class="flex items-center">
							<block v-if="classInfo.student_avatar?.length">
								<image
									:key="item"
									v-for="item in classInfo.student_avatar.slice(0, 6)"
									:src="item || baseImg + '/user-default.png'"
									class="class-student"
								></image>
							</block>

							<image :src="baseImg + '/class/class-right.png'" class="w-[20rpx] h-[20rpx]"></image>
						</view>
					</view>
				</view>
			</view>

			<view
				class="w-full px-4 mb-6 box-border"
				v-if="classInfo.plan_info && classInfo.plan_info.length"
			>
				<view class="w-full flex justify-between items-center">
					<view class="items-tips pl-3 pr-6 py-2 flex items-center">
						<image
							class="w-[36rpx] h-[36rpx]"
							:src="baseImg + '/class/class-gongdujihua.png'"
						></image>
						<text class="text-[#474747] text-[28rpx] ml-2">班级共读计划</text>
					</view>
					<view class="items-back" @tap="toLink('/pages-plan/class/index')">
						<image class="w-[20rpx] h-[20rpx]" :src="baseImg + '/class/class-right.png'"></image>
					</view>
				</view>

				<block v-if="classInfo.plan_info.length">
					<view
						class="bg-white rounded-[30rpx] mt-3 px-3 py-4 w-full box-border flex justify-between flex-col plan-item"
						v-for="item in classInfo.plan_info"
						:key="item.id"
						@tap="toLink('/pages-plan/details/index?id=' + item.id)"
					>
						<view class="w-full">
							<view class="w-full flex justify-between items-center">
								<view class="flex items-center">
									<image
										class="w-[36rpx] h-[36rpx]"
										:src="baseImg + '/class/class-time.png'"
									></image>
									<text
										class="text-[22rpx] text-[#303030] ml-1"
										v-if="item.status === 1 || item.status === 0"
										>{{ item.startTime }}-{{ item.endTime }}</text
									>
								</view>
								<text class="text-[24rpx] text-[#34A4E2]" v-if="item.status === 1">共读进行中</text>
								<text
									class="text-[24rpx] text-[#34A4E2]"
									v-if="item.status === 2 || item.status === 3"
									>已过期</text
								>
							</view>
							<view class="text-[29rpx] text-[#303030] mt-2">{{ item.title }}</view>
						</view>
						<view class="w-full flex justify-between items-center mt-[63rpx]">
							<view class="flex items-center">
								<text class="text-[25rpx] text-[#34A4E2]">{{ item.join_total || 0 }}人已参与</text>
								<text class="text-[25rpx] text-[#919191] ml-4"
									>{{ item.no_total || 0 }}人待参与</text
								>
							</view>
							<view class="flex items-center" v-if="item.user_avatar && item.user_avatar.length">
								<image
									v-for="cited in item.user_avatar"
									:key="cited.avatar"
									:src="cited.avatar || baseImg + '/user-default.png'"
									class="w-[48rpx] h-[48rpx] rounded-[50%] ml-2 border-1 first:ml-0 border-solid border-[#f1f1f1]"
								></image>
							</view>
						</view>
					</view>
				</block>
			</view>

			<view class="w-full px-4 mb-6 box-border" style="padding-bottom: 200rpx;">
				<view class="w-full flex justify-between items-center mb-3">
					<view class="items-tips pl-3 pr-6 py-2 flex items-center">
						<image class="w-[43rpx] h-[29rpx]" :src="baseImg + '/class/class-dongtai.png'"></image>
						<text class="text-[#474747] text-[28rpx] ml-2">班级动态</text>
					</view>
					<view class="items-back" @tap="toLink('/pages/class/dynamic/index')">
						<image class="w-[20rpx] h-[20rpx]" :src="baseImg + '/class/class-right.png'"></image>
					</view>
				</view>
				<block v-if="list.length">
					<view
						class="rounded-[30rpx] relative px-3 py-3 w-full mb-3 last:mb-0 overflow-hidden box-border flex justify-between flex-col"
						style="background: #f9f9fb"
						v-for="item in list"
						:key="item.id"
					>
						<view class="w-full text-[26rpx] text-[#303030]" v-if="item.model === 4">
							我完成了
							<text
								class="text-[#34A4E2]"
								@tap="toLink('/pages-book/details/index?id=' + item.object_id)"
								>《{{ item.remark }}》</text
							>
							测试闯关
							<text
								v-if="item.object_name"
								class="text-[#34A4E2]"
								@tap="toLink('/pages-book/details/index?id=' + item.object_id)"
								>《{{ item.object_name }}》</text
							>
							, 获得了<text class="text-[#34A4E2]">{{ item.integral }}</text
							>积分, 你也来闯关吧!
						</view>
						<view class="w-full text-[26rpx] text-[#303030]" v-if="item.model === 5">
							我已经读完了
							<text class="text-[#34A4E2]">《{{ item.remark }}》</text>
							, 获得了<text class="text-[#34A4E2]">{{ item.integral }}</text
							>积分, 你也来试试吧!
						</view>
						<view class="w-full text-[26rpx] text-[#303030]" v-if="item.model === 6">
							我已经完成了
							<text
								class="text-[#34A4E2]"
								@tap="toLink('/pages-plan/details/index?id=' + item.object_id)"
								>班级共读计划: “{{ item.remark }}”</text
							>
							, 获得了<text class="text-[#34A4E2]">{{ item.integral }}</text
							>积分, 你也来试试吧!
						</view>
						<view class="w-full text-[26rpx] text-[#303030]" v-if="item.model === 7">
							我已经完成了
							<text
								class="text-[#34A4E2]"
								@tap="toLink('/pages-plan/details/index?id=' + item.object_id)"
								>倍阅共读计划: “{{ item.remark }}”</text
							>
							, 获得了<text class="text-[#34A4E2]">{{ item.integral }}</text
							>积分, 你也来试试吧!
						</view>
						<view class="w-full flex justify-between items-center mt-6">
							<view class="flex items-center">
								<image
									:src="item.avatar || baseImg + '/user-default.png'"
									class="w-[48rpx] h-[48rpx] rounded-[50%] mr-1"
								></image>
								<text class="text-[#303030] text-[28rpx]">{{ item.student_name }}</text>
							</view>
							<text class="text-[#ABABAB] text-[25rpx]">{{ item.created_at }}</text>
						</view>
					</view>
				</block>
			</view>
		</block>
		<block v-else>
			<view
				class="w-full h-[100vh] box-border flex justify-center items-center flex-col"
				:style="{ paddingTop: barAlbright + 'rpx', marginTop: '-' + barAlbright + 'rpx' }"
			>
				<image :src="baseImg + '/class/class-login.png'" class="w-[352rpx] h-[317rpx]"></image>
				<view class="w-full flex justify-center items-center flex-col mt-8">
					<text class="text-[#474747] text-[32rpx]">还没有加入班级</text>
					<view
						@tap="toLogin"
						class="mt-4 w-[392rpx] rounded-[50rpx] h-[101rpx] flex justify-center items-center text-[#fff] text-[32rpx] class-login-btn"
						>去加入班级</view
					>
				</view>
			</view>
		</block>
		<tab-bar current="2"></tab-bar>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { toAuthPage } from '@/utils/jump';
import { useUserStore } from '@/store';
import useChangeTabbar from '@/hooks/useChangeTabbar';
import { systemInfo } from '@/utils/getSystemInfo';
import { getClassInfo, Class, getClassDynamic } from '@/service/class';
import { formatTime, initializeApp } from '@/utils';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const { statusBarHeight, navHeight } = systemInfo();
const barAlbright = ref(0);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const classInfo = ref<Class.HomeInfo>({});
const list = ref([]);

onShow(() => {
	barAlbright.value = navHeight + statusBarHeight;
	if (userInfo.value.student_id && userInfo.value.class_id) {
		initializeApp(getInfo(), getList());
	}
});

const getInfo = async () => {
	const res = await getClassInfo();
	if (res.status_code === 200 && res.data) {
		if (res.data.plan_info.length) {
			res.data.plan_info.forEach(item => {
				item.startTime = formatTime(item.start_time, '年月日', false);
				item.endTime = formatTime(item.end_time, '年月日', false);
			});
		}
		classInfo.value = res.data;
	}
};

const getList = async () => {
	const res = await getClassDynamic({
		id: userInfo.value.class_id,
		page: 1,
		page_size: 3,
	});
	uni.hideLoading();
	if (res.status_code === 200 && res.data) {
		list.value = res.data.list;
	}
};

const toLogin = () => {
	// 跳转登录是否 验证授权
	toAuthPage();
};

//
useChangeTabbar(1);

const toLink = url => {
	if (!url) return;
	uni.navigateTo({
		url,
	});
};
</script>
<style lang="scss">
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}
</style>
<style lang="scss" scoped>
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}

.class-card {
	background-color: rgb(255 208 50 / 100%);
	box-shadow:
		0 0 4px 0 rgb(0 0 0 / 3%),
		0 7px 30px 0 rgb(0 0 0 / 7%);
}

.class-student {
	width: 47rpx;
	height: 47rpx;
	margin-right: 10rpx;
	background: #c3c3c3;
	border: 1px solid #f1f1f1;
	border-radius: 50%;
}

.student-process {
	background-color: rgb(243 243 245 / 80%);
	border-radius: 30rpx;
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
		0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
}

.items-tips {
	background: #f3f3f5;
	border-radius: 30rpx;
}

.items-back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 63rpx;
	height: 63rpx;
	background: #f3f3f5;
	border-radius: 50rpx;
}

.plan-item {
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
		0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
}

.active-item {
	background-color: #f9f9fb;
}

.class-login-btn {
	background: #f4c421;
}
</style>
